<template>
  <div class="line" ref="boxRef" :style="{height: `${props.height}px`,width:`${props.width}px`}"></div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted,reactive, getCurrentInstance, ref } from 'vue'
import type { EChartsOption, EChartsType } from "echarts";
import * as echarts from "echarts";


const props:IProps = defineProps({
  height:{
    type:Number,
    default:300
  },
  width:{
    type:Number,
    default:300
  },
  title:{
    type:String,
  }
})
const that = getCurrentInstance();
interface IProps{
    title?:string
    data?:{
        value:number;
        name:string;
    }[],
    height:number
    width:number   
}
// const defaultProps:IProps={
//   height:300,
//   width:300
// }
// export default defineComponent({
//   name:'line',
//   props:defineProps,
// })
let chart:echarts.ECharts|null=null
onMounted(() => {
  let myChart = document.getElementsByClassName('line')[0]
  // let Chart = that?.proxy?.$echarts.init(myChart as HTMLDivElement)
  chart = echarts.init(myChart as HTMLDivElement)
  chart.setOption(option)
  // console.log($attrs, "propssssssssssss");
})
onUnmounted(()=>{
  if(chart){
    chart.dispose()
    chart=null
  }
})
    // 使用防抖函数处理窗口大小变化事件
    function debounce(fn: Function, delay: number) {
      let timer: ReturnType<typeof setTimeout>
      return function(this: any, ...args: any[]) {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, delay)
      }
    }
window.addEventListener('resize',debounce(()=>{
  if(chart){
    chart.resize()
  }
},200))
// console.log(prop.attrs);
const option = reactive<EChartsOption>({
  title:{
    show: Boolean(`${props.title}` )|| false,
    text:props.title ,
    textStyle: {
          color: '#333'
        }
  },
  // title:{
  //   show: true|| false,
  //   text: "props.attrs.title",
  //   textStyle: {
  //         color: '#333'
  //       }
  // },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});
</script>
<style lang="scss" scoped></style>